<template>
  <BottomDrawer
    :visible="props.visible"
    :title="title"
    :width="500"
    @close="onClose"
  >
    <div class="common-dialog-body">
      <slot name="body">
       <el-input placeholder="请输入大于0的正数" type="number" style="width: 432px;"></el-input>
      </slot>
      <div class="common-dialog-desc">
        <slot name="desc"></slot>
      </div>
    </div>
    <template #footer>
      <slot name="footer">
        <el-button type="primary" @click="onConfirm">确认</el-button>
      </slot>
    </template>
  </BottomDrawer>
</template>

<script setup lang="ts">
import BottomDrawer from '@/components/BottomDrawer/index.vue';
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  visible: Boolean,
  title: {
    type: String,
    default: '',
  },
  width: {
    type: Number,
    default: 400,
  },
});
const emit = defineEmits(['close', 'confirm']);

function onClose() {
  emit('close');
}
function onConfirm() {
  emit('confirm');
}
</script>

<style scoped lang="scss">
.common-dialog-body {
  padding: 0 32px 0 32px;
}
.common-dialog-desc {
  color: #888;
  font-size: 14px;
  margin-top: 12px;
}
</style>
